<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { deleteTeam, getPage, SearchTeam, Team } from '../../../api/team'
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import DeptForm from './deptForm.vue'

import dayjs from 'dayjs'

const tableData = ref<Team[]>([])

const search = ref('')

onMounted(() => {
  onSearch()
})
const onSearch = () => {
  const p: SearchTeam = { page: 1, pageSize: 999, teamName: '' }
  getPage(p).then(res => {
    tableData.value = res.list
  })
}

const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
            data.teamName.toLowerCase().includes(search.value.toLowerCase())
  )
)

const formatter = (row: Team, column: TableColumnCtx<Team>) => {
  return dayjs(row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
}
const refDeptForm = ref()
const clickAddBut = () => {
  refDeptForm.value.showForAdd()
}
const handleUpdate = (row: Team) => {
  refDeptForm.value.showForEdit(row.id)
}
const handleDelete = (row: Team) => {
  console.log(row)
  deleteTeam(row.id).then(res => {
    onSearch()
  })
}

</script>

<template>
  <DeptForm ref="refDeptForm" :onSearch="onSearch"></DeptForm>
  <el-card>
    <el-row>
      <el-col :span="24">
        <el-card class="search-card">
          <el-input v-model="search" clearable placeholder="按名称过滤团队"/>
          <el-button type="primary" @click="clickAddBut">添加</el-button>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
  <el-card>
    <el-row>
      <el-col :span="24">
        <el-table
            :data="filterTableData"
            border
            default-expand-all
            row-key="id"
            style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column type="index" width="50"/>
          <el-table-column label="团队名称" prop="teamName" width="200"/>
          <el-table-column align="center" label="最大用户数" prop="maxUserNum" width="120"/>
          <el-table-column align="center" label="剩余用户数" prop="balanceUserNum" width="120"/>
          <el-table-column
              align="center"
              label="状态"
              prop="status"
              width="100"
          >
            <template #default="scope">
              <el-tag
                  :type="scope.row.status === 2 ? 'warning' : 'success'"
                  disable-transitions
              >{{ scope.row.status === 2 ? "停用" : "正常" }}
              </el-tag
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建人" prop="creator"/>
          <el-table-column :formatter="formatter" label="创建时间" width="180"/>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleUpdate(scope.row)"
              >编辑
              </el-button
              >
              <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.row)"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>
<style lang="scss" scoped>
.el-card {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.search-card {
  margin-left: 20px;
  margin-right: 20px;

  .el-card__body {
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }

  margin-bottom: 10px;
}
</style>
